<template>
 <div class="userinfo">
    <div class="user">
      <!--头像栏开始 -->
      <div class="logo">
        <div class="pic">
          <img width="100%" height="100%" :src="articles.userFace"  alt="">
        </div>
        <div class="left">
          <el-button size="small" type="success" @click="toTu" >修 改 头 像</el-button>
        </div>
      </div>
      <!--头像栏结束-->
      <el-divider></el-divider>
      <!--用户信息栏开始-->
      <p><strong> 用户姓名：</strong> {{articles.realname}} </p>
      <p><strong> 用户手机: </strong> {{articles.telephone}}</p>
      <p><strong> 用户性别: </strong>
        <span v-if='articles.gender=="male"'>男</span>
        <span v-if='articles.gender=="男"'>男</span>
        <span v-if='articles.gender=="女"'>女</span>
      </p>
      <p><strong> 用户角色：</strong> {{articles.roles[0].name}}</p>
      <p><strong> 注册时间: </strong> {{articles.registerTime}}</p>
      <p><strong> 登录用户：</strong> {{articles.username}}</p>
      <p><strong> 用户状态：</strong> {{articles.status}}</p>
      <div class="Add" > 
        <el-button size="small" type="success" @click="toAdd()">修改个人信息</el-button>
      </div>
      <!--用户信息栏结束-->
    </div>
  
    <!--头像模态栏开始-->
    <el-dialog  title="提示" :visible.sync="dialogVisible" width="50%">
      <span>
      <el-upload class="upload-demo" action="http://http://47.94.46.113:8009/file/upload"  
          :on-success="successHadler">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
      </el-upload> 
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </span>
    </el-dialog>
    <!--头像模态栏结束-->

 <!--用户信息模态栏开始-->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form">   
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off"  
           :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" :disabled="true" type="password"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="formLabelWidth">
        <el-input v-model="form.realname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户手机" :label-width="formLabelWidth">
        <el-input v-model="form.telephone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="form.gender" label="男">男</el-radio>
          <el-radio v-model="form.gender" label="女">女</el-radio>
      </el-form-item>
    </el-form>
   <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
   </div>
  </el-dialog>
 <!--用户信息模态栏结束-->
 
 </div>
</template>

<script>
    import {get,post} from '@/utils/request'
    import { getToken } from '@/utils/auth'
    export default {
    data(){
        return {
        articles:[],
        title:'用户信息',
        dialogFormVisible:false,
        dialogVisible:false,
        form:{},
        formLabelWidth:'90px',
        radio: '1',
        }
    },
    methods: {
        //查询登录的用户信息
        findAllUserinfo(){
        get('/user/info?token='+getToken()).then(res =>{
            console.log(res.data)
            if(res.status == 200){
            this.articles = res.data
            }else {
            this.$message({
                type:'error',
                message:res.message
            })
            }
        })
        },

        //修改头像信息
        toTu(){
        this.dialogVisible=true

        },

        //修改用户信息
        toAdd(){
        this.dialogFormVisible=true
        this.form=this.articles
        },

        //提交保存用户信息
        submit(){
        post('/baseUser/saveOrUpdate',this.form).then(res=>{
        console.log(res)
        if(res.status==200){
        this.dialogFormVisible = false
        this.$message({
            type:'success',
            message:res.message
        })
        this.findAllUserinfo()
        }
        })
        },

        //上传用户头像 
        upload(){
        post('/baseUser/alterUserface',this.form).then(res=>{
        console.log(res)
        if(res.status==200){
            this.dialogFormVisible = false
            this.$message({
            type:'success',
            message:res.message
        })
        this.findAllUserinfo()
        }
    })
    console.log("无")
        },
        //修改头像文件
        successHadler(file){
        console.log(file)
        }
    },
    created(){
    this.findAllUserinfo()
    }
    }
</script>

<style>
  .userinfo {
    height: 650px;
    background-color: fff;
    border-radius: 10px;
    padding: 1em;
  }
  .userinfo .logo{
    height: 140px;
    width: 1080px;
    margin: 0 auto;
    padding: 1em;
  }
  .userinfo .logo .pic{
    height: 100px;
    width: 100px;
    border-radius: 100px;
  }
  .userinfo .logo .left{
    height: 100px;
    width: 100px;
    float: right;
  }
  .userinfo .user p{
    height: 40px;
  }
  .userinfo .user .Add{
    height: 40px;
    float: right;
  }
</style>